<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码</title>
    <link rel="stylesheet" href='/static/css/change.css'>
    <script src="/static/js/change.js"></script>
</head>
<body>
    <div class="password-change-container">
        <h2>修改密码</h2>
        <form id="passwordChangeForm" method="post" action="{% url 'store_system:change_password' %}">
            {% csrf_token %}
            <div class="form-group">
                <label for="currentPassword">当前密码</label>
                <input type="password" id="currentPassword" name="current_password" required>
                <div class="error-message" id="currentPasswordError"></div>
            </div>
            
            <div class="form-group">
                <label for="newPassword">新密码</label>
                <input type="password" id="newPassword" name="new_password" required>
                <div class="error-message" id="newPasswordError"></div>
            </div>
            
            <div class="form-group">
                <label for="confirmPassword">确认新密码</label>
                <input type="password" id="confirmPassword" name="confirm_password" required>
                <div class="error-message" id="confirmPasswordError"></div>
            </div>
            
            <button type="submit">修改密码</button>
            <a href="/" class="btn-home" id="homeButton">返回首页</a>
        </form>
        
        <div class="success-message" id="successMessage">
            ✅ 密码修改成功！
        </div>
    </div>

    <!-- 成功弹窗 -->
    <div class="modal" id="successModal">
        <div class="modal-content">
            <div class="modal-icon">✅</div>
            <div class="modal-title">操作成功</div>
            <div class="modal-message">密码修改成功！您现在可以使用新密码登录。</div>
            <div class="modal-buttons">
                <button class="modal-btn modal-btn-primary" onclick="redirectToHome()">返回首页</button>
                <button class="modal-btn modal-btn-secondary" onclick="closeModal()">继续操作</button>
            </div>
        </div>
    </div>
</body>
</html>